<template>
    <div class="common-details">
        <common-title :title="parentObj.name" backPath="/visualization"></common-title>
        <div class="common-details-wrap">
            <el-form ref="commonForm" :model="addObj" class="common-form" label-position="left">
                <el-row :gutter="20">
                    <el-col :span="4">
                        <el-form-item label="标题" prop="title">
                            <el-input v-model="addObj.title" placeholder="请输入标题"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item label="作者" prop="author">
                            <el-input v-model="addObj.author" placeholder="请输入作者"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="7">
                        <el-form-item label="来源" prop="source">
                            <div class="flex-form-item">
                                <el-input style="margin-right: 5px" v-model="addObj.source"
                                          placeholder="请输入来源"></el-input>
                                <el-select
                                        v-model="addObj.source"
                                        placeholder="请选择来源"
                                        clearable
                                >
                                    <el-option v-for="item in sourceList" :label="item.name" :value="item.code"
                                               :key="item.code"/>
                                </el-select>
                            </div>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item label="是否置顶" prop="source">
                            <el-select
                                    v-model="addObj.pinTop"
                                    placeholder="请选择是否置顶"
                                    clearable
                            >
                                <el-option v-for="item in whetherDict" :label="item.name" :value="item.code"
                                           :key="item.code"/>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="5">
                        <el-form-item label="是否同时发布" prop="source">
                            <el-select
                                    v-model="addObj.pinTop"
                                    placeholder="请选择是否同时发布"
                                    clearable
                            >
                                <el-option v-for="item in whetherDict" :label="item.name" :value="item.code"
                                           :key="item.code"/>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24" v-if="addObj.pinTop === '1'">
                        <el-checkbox-group v-model="addObj.columnGroup">
                            <el-checkbox v-for="item in categoryDict" :key="item.code" :label="item.name"
                                         :value="item.code"/>
                        </el-checkbox-group>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item label="上传时间">
                            <el-input readonly v-model="addObj.createTime" placeholder="系统自动生成"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item label="显示时间">
                            <el-date-picker
                                    v-model="addObj.showTime"
                                    type="date"
                                    placeholder="请选择"
                            />
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item label="添加new">
                            <el-select
                                    v-model="addObj.addNew"
                                    placeholder="请选择是否添加new"
                                    clearable
                            >
                                <el-option v-for="item in whetherDict" :label="item.name" :value="item.code"
                                           :key="item.code"/>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="转向链接">
                            <el-input v-model="addObj.url" placeholder="必须以http://开头"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="文章关键字">
                            <el-input v-model="addObj.keyword" placeholder="多个以英文逗号分隔"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="内容简介">
                            <el-input type="textarea" :rows="5" v-model="addObj.introduction"
                                      placeholder="请输入简介"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div class="rich-editor">
                <Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef"
                         :defaultConfig="toolbarConfig" :mode="mode"/>
                <Editor style="height: 500px; overflow-y: hidden;" v-model="content"
                        :defaultConfig="editorConfig" :mode="mode" @onCreated="handleCreated"/>
            </div>
            <div class="common-btn">
                <el-button >取消</el-button>
                <el-button type="primary" @click="submit">提交</el-button>
            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
import CommonTitle from "@/components/common-title.vue"
import {ref, onMounted, shallowRef, onBeforeUnmount} from "vue"
import "@wangeditor/editor/dist/css/style.css"
import {Editor, Toolbar} from "@wangeditor/editor-for-vue"
import {useRoute} from "vue-router"
const route = useRoute()
import {whetherDict, categoryDict} from '@/utils/dict'
const parentObj = ref(route.query)
const addObj = ref({
    title: '',
    author: '',
    source: '',
    pinTop: '',
    release: '',
    columnGroup: [],
    createTime: '',
    showTime: '',
    addNew: '',
    url: '',
    keyword: '',
    introduction: ''
})
const sourceList = ref([
    {code: '1', name: '湖北省招生办'},
    {code: '2', name: '湖北省教育厅'},
    {code: '3', name: '教育部'},
])
const rules = ref({
    title: [
        {required: true, message: '请输入标题', trigger: 'blur'}
    ],
    author: [
        {required: true, message: '请输入作者', trigger: 'blur'}
    ],
    source: [
        {required: true, message: '请输入来源', trigger: 'blur'}
    ],
    pinTop: [
        {required: true, message: '请选择是否置顶', trigger: 'change'}
    ],
    release: [
        {required: true, message: '请选择是否同时发布', trigger: 'change'}
    ]
})

const content = ref('')
const toolbarConfig = {
    toolbarKeys: [
        "headerSelect",  // 标题选择
        'bold', // 加粗
        'italic', // 斜体
        'through', // 删除线
        'underline', // 下划线
        'justifyCenter', // 居中对齐
        'justifyJustify', // 两端对齐
        'justifyLeft', // 左对齐
        'justifyRight', // 右对齐
        'bulletedList', // 无序列表
        'numberedList', // 有序列表
        'color', // 文字颜色
        'insertLink', // 插入链接
        'fontSize', // 字体大小
        'lineHeight', // 行高
        'delIndent', // 缩进
        'indent', // 增进
        'divider', // 分割线
        'insertTable', // 插入表格
        'undo', // 撤销
        'redo', // 重做
        'clearStyle', // 清除格式
        'fullScreen', // 全屏
        "blockquote", // 引用
        "codeBlock", // 代码块
        "insertImage", // 插入图片
        "uploadImage", // 上传图片
        "insertVideo", // 插入视频
    ]
}
const editorConfig = {
    placeholder: '请输入内容...', //初始的提示内容
    MENU_CONF: {
        uploadImage: {
            server: 'https://.....',  // 图片上传接口
            fieldName: 'file',  // 上传字段名，根据自己的接口参数配置
        }
    }
}
const editorRef = shallowRef()
const handleCreated = (editor) => {
    editorRef.value = editor
}
const submit = () => {
    console.log(content.value);
}
onMounted(() => {

})
onBeforeUnmount(() => {
    const editor = editorRef.value
    if (editor == null) return
    editor.destroy()  // 销毁 editor 实例
})
</script>
<style scoped lang="less">
.common-details-wrap {
    background: #fff;
    padding: 12px;
    margin-top: 16px;

    .rich-editor {
        border: 1px solid #ccc;
        min-width: 365px;
        max-width: 100%;
    }
    .common-btn{
        display: flex;
        margin: 20px 0;
        justify-content: center;
    }
}
</style>